<template>
  <div class="w-full h-full">
    <component :is="currentLayoutComponent" />
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { LayoutMode } from '@/enums/index.js'
import TopLayout from '@/layouts/modes/top/index.vue'
import LeftLayout from '@/layouts/modes/left/index.vue'
import MixLayout from '@/layouts/modes/mix/index.vue'

import { useLayout } from '@/composables/index.js'
const { currentLayout } = useLayout()

const route = useRoute()
const currentLayoutComponent = computed(() => {
  const override = route.meta?.layout
  const layoutToUse = override ?? currentLayout.value
  switch (layoutToUse) {
    case LayoutMode.TOP:
      return TopLayout
    case LayoutMode.MIX:
      return MixLayout
    case LayoutMode.LEFT:
    default:
      return LeftLayout
  }
})
</script>
<style scoped></style>
